<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input
        v-model="queryParams.processDefinitionKey"
        :placeholder="'流程定义标识'"
        class="filter-item search-item"
      />

      <el-button class="filter-item" type="primary" plain @click="search">
        查询
      </el-button>
      <el-button class="filter-item" type="warning" plain @click="reset">
        重置
      </el-button>
      <el-table
        ref="table"
        :key="tableKey"
        v-loading="loading"
        :data="list"
        border
        fit
        style="width: 100%"
      >
        <el-table-column
          :label="'任务标识'"
          prop="id"
          :show-overflow-tooltip="true"
          align="center"
          min-width="120px"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column
          :label="'任务名称'"
          prop="id"
          :show-overflow-tooltip="true"
          align="center"
          min-width="120px"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="'签收人'" class-name="status-col">
          <template slot-scope="scope">
            <span>{{ scope.row.assignee }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="'签收时间'" class-name="status-col">
          <template slot-scope="scope">
            <span>{{ scope.row.claimTime }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="'流程实例ID'" class-name="status-col">
          <template slot-scope="scope">
            <span>{{ scope.row.processInstanceId }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="'流程定义标识'" class-name="status-col">
          <template slot-scope="scope">
            <span>{{ scope.row.processDefinitionId }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="'创建时间'" class-name="status-col">
          <template slot-scope="scope">
            <span>{{ scope.row.createTime }}</span>
          </template>
        </el-table-column>

        <el-table-column
          :label="'操作'"
          align="center"
          min-width="200px"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="{ row }">
            <i
              v-if="row.assignee == null"
              class="el-icon-edit table-operation"
              style="color: #2db7f5"
              @click="claim(row)"
              >任务签收</i
            >
            <i
              v-if="row.assignee != null"
              class="el-icon-edit table-operation"
              style="color: #2db7f5"
              @click="start(row)"
              >审批</i
            >
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="pagination.num"
        :limit.sync="pagination.size"
        @pagination="search"
      />

      <el-dialog
        :title="title"
        width="30%"
        top="50px"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :visible.sync="isVisible"
      >
        <VueDragFormBuild
          style="width: 60%"
          :formTemplate="formTemplate"
          :models="models"
        />
        <el-button class="filter-item" type="primary" plain @click="submit">
          审核提交
        </el-button>
      </el-dialog>
      <!-- <el-form
        ref="form"
        :model="leave"
        :rules="rules"
        label-position="right"
        label-width="100px"
      >
        <el-form-item label="请假类型" prop="leaveType">
          <el-select v-model="leave.leaveType" placeholder="请选择请假类型">
            <el-option label="公休" value="公休"></el-option>
            <el-option label="病假" value="病假"></el-option>
            <el-option label="调休" value="调休"></el-option>
            <el-option label="事假" value="事假"></el-option>
            <el-option label="婚假" value="婚假"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="'开始时间'" prop="startTime">
          <el-date-picker
            type="date"
            placeholder="选择日期"
            v-model="leave.startTime"
            style="width: 100%"
          ></el-date-picker>
        </el-form-item>
        <el-form-item :label="'结束时间'" prop="endTime">
          <el-date-picker
            type="date"
            placeholder="选择日期"
            v-model="leave.endTime"
            style="width: 100%"
          ></el-date-picker>
        </el-form-item>
        <el-form-item :label="'请假原因'" prop="reason">
          <el-input v-model="leave.reason" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          plain
          :loading="buttonLoading"
          @click="submitForm"
        >
          {{ $t("common.confirm") }}
        </el-button>
      </div> -->
    </div>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination";

export default {
  components: { Pagination },
  data() {
    return {
      processInstanceId: "",
      taskId: "",
      title: "流程发起",
      models: {},
      variables: {},
      formTemplate: {},
      isVisible: false,
      pagination: {
        size: 10,
        num: 1
      },
      tableKey: 0,
      loading: false,
      list: null,
      total: 0,
      sort: {},
      selection: [],
      queryParams: {}
      // buttonLoading: false,
      // leave: {},
      // rules: {
      //   leaveType: [
      //     { required: true, message: this.$t('rules.require'), trigger: 'blur' }
      //   ],
      //   startTime: [
      //     { required: true, message: this.$t('rules.require'), trigger: 'blur' }
      //   ],
      //   endTime: [
      //     { required: true, message: this.$t('rules.require'), trigger: 'blur' }
      //   ],
      //   reason: [
      //     { required: true, message: this.$t('rules.require'), trigger: 'blur' }
      //   ],
      // }
    };
  },
  computed: {},
  created() {},
  activated() {},
  methods: {
    claim(row) {
      this.$get(`/activiti/service/process/task/claim/${row.id}`).then(res => {
        if (res.data.code == "000000") {
          this.$message.success("已签收");
          this.search();
        }
      });
    },
    submit() {
      console.log(4, this.models);
      var startObj = {};
      for (let [key, value] of Object.entries(this.models)) {
        startObj["fp_" + key] = value;
      }
      console.log(startObj);
      startObj.taskId = this.taskId;
      startObj.processInstanceId = this.processInstanceId;
      this.$post(`/activiti/service/process/task/complete`, {
        ...startObj
      }).then(res => {
        if (res.data.code == "000000") {
          this.$message.success("办理成功！");
          this.isVisible = false;
        } else {
          this.$message.success("流程发起失败");
        }
      });
    },
    start(row) {
      this.taskId = row.id;
      this.processInstanceId = row.processInstanceId;
      this.$get(`/activiti/service/formKey/get-form-bykey/task/${row.id}`).then(
        res => {
          console.log(JSON.parse(res.data.resultBody.content));
          this.formTemplate = JSON.parse(res.data.resultBody.content);
          console.log(1, this.models);
          this.getModels(row);
        }
      );
    },
    cloneObj(obj) {
      var str,
        newobj = obj.constructor === Array ? [] : {};
      if (typeof obj !== "object") {
        return;
      } else if (window.JSON) {
        str = JSON.stringify(obj); //序列化对象
        newobj = JSON.parse(str); //还原
      } else {
        //如果不支持以上方法
        for (var i in obj) {
          newobj[i] = typeof obj[i] === "object" ? cloneObj(obj[i]) : obj[i];
        }
      }
      return newobj;
    },
    getModels(row) {
      var queryObj = {
        taskId: row.id
      };
      this.$get(`/activiti/service/formKey/getProcessVariables`, {
        ...queryObj
      }).then(res => {
        console.log(2, this.models);
        var variables = res.data.resultBody;
        this.models = Object.assign(this.models, variables);
        console.log(3, this.models);
        this.isVisible = true;
      });
    },
    reset() {},
    search() {
      var queryObj = {
        pageNum: this.pagination.num,
        pageSize: this.pagination.size,
        processDefinitionKey: this.queryParams.processDefinitionKey
      };
      this.$post("/activiti/service/process/task/list", {
        ...this.queryObj
      }).then(res => {
        const data = res.data.resultBody;
        this.total = data.total;
        this.list = data.records;
        this.loading = false;
      });
    }
    // submitForm() {
    //   this.$refs.form.validate(valid => {
    //     if (valid) {
    //       //   this.buttonLoading = true;
    //       // create
    //       this.$post('activiti/service/leave/start', { ...this.leave }).then(
    //         () => {
    //           this.buttonLoading = false;
    //           this.isVisible = false;
    //           this.$message({
    //             message: this.$t('tips.createSuccess'),
    //             type: 'success'
    //           });
    //           this.$emit('success');
    //         }
    //       );
    //     } else {
    //       return false;
    //     }
    //   })
    // }
  },
  filters: {},
  destroyed() {}
};
</script>
<style lang="scss" scoped></style>
